<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <script src="static/assets/js/echarts.min.js"></script>

  <title>可视化展示</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">
  <!-- Favicons -->
  <link href="static/assets/img/favicon.png" rel="icon">
  <link href="static/assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,600,600i,700,700i,900" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="static/assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="static/assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="static/assets/vendor/aos/aos.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="static/assets/css/style.css" rel="stylesheet">
</head>

<body>
  <!-- ======= Header ======= -->
  <header id="header">
    <div class="container">
      <div class="logo float-left">
        <h1 class="text-light"><a href="zhuye"><span>课程设计</span></a></h1>
      </div>
      <nav class="nav-menu float-right d-none d-lg-block">
       <ul>
            <li class="active"><a href="/index">首页<i class="la la-angle-down"></i></a></li>
          <li><a href="/movie">交易日志</a></li>
          <li><a href="/score">处理流程</a></li>
          <li><a href="/team">可视化</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- ======= Our Team Section ======= -->
    <section id="team" class="team">
      <div class="container">
        <div class="section-title">
          <h2>可视化展示</h2>
            <sub>(提示：点击蓝色方框可跳转)</sub>
        </div>
        <div class="row">



            <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up">
            <div class="member">
              <div class="pic"><img src="static/assets/img/team/one.jpg" class="img-fluid" alt=""></div>
            <div class="member-info"  >
                  <a href="#tu1" >
                    <h4>商品种类分析</h4>
                    <span>圆环图</span>
                  </a>
              </div>
            </div>
          </div>



         <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
            <div class="member">
              <div class="pic"><img src="static/assets/img/team/two.jpg" class="img-fluid" alt=""></div>
              <div class="member-info"  >
                  <a href="#tu2" >
                    <h4>访问深度分析</h4>
                    <span>饼图</span>
                  </a>
              </div>
            </div>
          </div>



          <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
            <div class="member">
              <div class="pic"><img src="static/assets/img/team/three.jpg" class="img-fluid" alt=""></div>
           <div class="member-info"  >
                  <a href="#tu3" >
                    <h4>用户区域分析</h4>
                    <span>玫瑰图</span>
                  </a>
              </div>
            </div>
          </div>


          <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="member">
              <div class="pic"><img src="static/assets/img/team/four.jpg" class="img-fluid" alt=""></div>
           <div class="member-info"  >
                  <a href="#tu4" >
                    <h4>商品种类分析</h4>
                    <span>曲线图</span>
                  </a>
              </div>
            </div>
          </div>




            <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
            <div class="member">
              <div class="pic"><img src="static/assets/img/team/five.jpg" class="img-fluid" alt=""></div>
            <div class="member-info"  >
                  <a href="#tu5" >
                    <h4>浏览器类型分析</h4>
                    <span>漏斗图</span>
                  </a>
              </div>
            </div>
          </div>








        </div>

      </div>
    </section><!-- End Our Team Section -->





<!--商品销售占比可视化-->
  <section id="tu1" class="services">
      <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="section-title">
          <h2>商品销量占比</h2>
            <div id="tu11" style="width: 100%;height:300px"></div>
        </div>
        <div class="row"></div>
      </div>
    </section>
   <script type="text/javascript">
var dom1 = document.getElementById("tu11");
var myChart1 = echarts.init(dom1);
var app1 = {};
option = null;
const data1 = [];
for (let i = 0; i < 5; ++i) {
  data1.push(Math.round(Math.random() * 200));
}
option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
       { value: 2310, name: '服装' },
        { value: 1869, name: '美妆' },
        { value: 1484, name: '食品' },
        { value: 931, name: '运动' },
        { value: 681, name: '图书' },
          { value: 479, name: '家电' },
          { value: 249, name: '医疗' },
          { value: 230, name: '工业' }
      ]
    }
  ]
};

if (option && typeof option === "object") {
    myChart1.setOption(option, true);
}
   </script>

<!--用户访问深度可视化-->
    <section id="tu2" class="services">
      <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="section-title">
          <h2>用户访问深度分布</h2>
            <div id="tu22" style="width: 100%;height:300px"></div>
        </div>
        <div class="row"></div>
      </div>
    </section><!-- End Services Section -->
   <script type="text/javascript">
var dom2 = document.getElementById("tu22");
var myChart2 = echarts.init(dom2);
var app2= {};
option = null;
const data2 = [];
for (let i = 0; i < 5; ++i) {
  data2.push(Math.round(Math.random() * 200));
}
option = {
  backgroundColor: '#2c343c',
  title: {

    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 333, name: '访问深度为一' },
        { value: 875, name: '访问深度为二' },
        { value: 901, name: '访问深度为三' },
        { value: 1367, name: '访问深度为四' },
        { value: 1291, name: '访问深度为五' },
        { value: 2060, name: '访问深度为六' },
        { value: 910, name: '访问深度为七' },
        { value: 339, name: '访问深度为八' },
        { value: 157, name: '访问深度为九' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};

if (option && typeof option === "object") {
    myChart2.setOption(option, true);
}
       </script>

    <!-- 用户区域分布 -->
    <section id="tu3" class="portfolio section-bg">
      <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="section-title">
          <h2>用户区域分布</h2>
             <div id="tu33" style="width: 100%;height:300px"></div>
         </div>
      </div>
    </section>
  <script type="text/javascript">
var dom3 = document.getElementById("tu33");
var myChart3 = echarts.init(dom3);
var app3 = {};
option = null;
const data3 = [];
for (let i = 0; i < 5; ++i) {
  data3.push(Math.round(Math.random() * 200));
}
option = {
  title: {

    subtext: 'Faker Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    left: 'center',
    top: 'bottom',
    data: [
      'rose1',
      'rose2',
      'rose3',
      'rose4',
      'rose5',
      'rose6',
      'rose7',
      'rose8'
    ]
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Radius Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['25%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true
        }
      },
      data: [
        {name:'辽宁',value:277},
{name:'甘肃',value:271},
{name:'贵州',value:262},
{name:'浙江',value:260},
{name:'广西',value:258},
{name:'黑龙',value:256},
{name:'吉林',value:256},
{name:'河南',value:255},
{name:'福建',value:253},
{name:'四川',value:251},
{name:'青海',value:251},
{name:'河北',value:250},
{name:'山西',value:249},
{name:'江苏',value:249},
{name:'西藏',value:247},
{name:'陕西',value:246},
{name:'江西',value:242},
{name:'宁夏',value:241},
{name:'山东',value:241},
{name:'台湾',value:239},
{name:'重庆',value:237},
{name:'新疆',value:235},
{name:'海南',value:235},
{name:'澳门',value:232},
{name:'湖北',value:229},
{name:'内蒙',value:229},
{name:'上海',value:229},
{name:'云南',value:229},
{name:'广东',value:228},
{name:'安徽',value:225},
{name:'香港',value:223},
{name:'天津',value:220},
{name:'北京',value:218},
{name:'湖南',value:210},
      ]
    },
    {
      name: 'Area Mode',
      type: 'pie',
      radius: [20, 140],
      center: ['75%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      },
      data: [
        {name:'辽宁',value:277},
{name:'甘肃',value:271},
{name:'贵州',value:262},
{name:'浙江',value:260},
{name:'广西',value:258},
{name:'黑龙',value:256},
{name:'吉林',value:256},
{name:'河南',value:255},
{name:'福建',value:253},
{name:'四川',value:251},
{name:'青海',value:251},
{name:'河北',value:250},
{name:'山西',value:249},
{name:'江苏',value:249},
{name:'西藏',value:247},
{name:'陕西',value:246},
{name:'江西',value:242},
{name:'宁夏',value:241},
{name:'山东',value:241},
{name:'台湾',value:239},
{name:'重庆',value:237},
{name:'新疆',value:235},
{name:'海南',value:235},
{name:'澳门',value:232},
{name:'湖北',value:229},
{name:'内蒙',value:229},
{name:'上海',value:229},
{name:'云南',value:229},
{name:'广东',value:228},
{name:'安徽',value:225},
{name:'香港',value:223},
{name:'天津',value:220},
{name:'北京',value:218},
{name:'湖南',value:210},
      ]
    }
  ]
};


if (option && typeof option === "object") {
    myChart3.setOption(option, true);
}
       </script>

    <!-- ======= 成交时段分析 ======= -->
    <section id="tu4" class="team">
     <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="section-title">
          <h2>成交时段分布</h2>
             <div id="tu44" style="width: 100%;height:300px"></div>
         </div>
      </div>
    </section>
  <script type="text/javascript">
var dom4 = document.getElementById("tu44");
var myChart4= echarts.init(dom4);
var app4 = {};
option = null;
const data4 = [];
for (let i = 0; i < 5; ++i) {
  data4.push(Math.round(Math.random() * 200));
}
option = {
  xAxis: {
    type: 'category',
    data: ['1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [351,350,350,344,347,318,351,357,350,339,328,332,309,325,348,333,352,345,332,339,331,380,355,342,375],
      type: 'line',
      smooth: true
    }
  ]
};


if (option && typeof option === "object") {
    myChart4.setOption(option, true);
}
       </script>

    <!-- 浏览器类型占比 -->
    <section id="tu5" class="faq section-bg">
      <div class="container">
          <div class="container" data-aos="fade-up" data-aos-delay="100">
        <div class="section-title">
          <h2>浏览器类型占比</h2>
             <div id="tu55" style="width: 100%;height:300px"></div>
         </div>
      </div>
      </div>
    </section>
   <script type="text/javascript">
var dom5 = document.getElementById("tu55");
var myChart5= echarts.init(dom5);
var app5 = {};
option = null;
const data5 = [];
for (let i = 0; i < 5; ++i) {
  data4.push(Math.round(Math.random() * 200));
}
option = {

  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    data: ['Chrom', 'FireFox', 'IE', 'Sarfari', 'Other']
  },
  series: [
    {
      name: '浏览器',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 35.6, name: 'Chrom' },
        { value: 22.1, name: 'FireFox' },
        { value: 20.5, name: 'IE' },
        { value: 14.5, name: 'Sarfair' },
        { value: 7.1, name: 'Other' }
      ]
    }
  ]
};


if (option && typeof option === "object") {
    myChart5.setOption(option, true);
}
       </script>



  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

  <!-- Vendor JS Files -->
  <script src="static/assets/vendor/jquery/jquery.min.js"></script>
  <script src="static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <script src="static/assets/vendor/php-email-form/validate.js"></script>
  <script src="static/assets/vendor/jquery-sticky/jquery.sticky.js"></script>
  <script src="static/assets/vendor/venobox/venobox.min.js"></script>
  <script src="static/assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="static/assets/vendor/counterup/counterup.min.js"></script>
  <script src="static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="static/assets/vendor/aos/aos.js"></script>

  <!-- Template Main JS File -->
  <script src="static/assets/js/main.js"></script>

</body>

</html>